<template>
  <div class="sduty">
    <div class="content">
      <div class="top">
        <div class="box" style="line-height: 32px">
          <h2 style="float: left">分类:</h2>
          <meunBtn
            :list="meunBtnList"
            @change="change"
            :meunBtnkey="
              $route.query.categoryF != 'undefined'
                ? $route.query.categoryF
                : $route.query.category
            "
          >
          </meunBtn>
        </div>

        <div
          class="box"
          style="margin-top: 35px; line-height: 32px"
          v-if="getMeunList.length != 0"
        >
          <h2 style="float: left"></h2>
          <meunBtn
            :list="getMeunList"
            @change="change2"
            :meunBtnkey="$route.query.category"
          ></meunBtn>
        </div>

        <div class="box" style="margin-top: 35px; line-height: 32px">
          <h2 style="float: left">格式</h2>
          <meunBtn :list="geshiList" @change="change3"></meunBtn>
        </div>
      </div>
      <div class="search" style="height: 80px; line-height: 80px">
        <span> 当前位置：{{ this.positionD }}</span>
        <el-input
          style="width: 250px; float: right"
          placeholder="请输入课程名称"
          v-model="search.name"
          class="input-with-select"
        >
          <el-button
            slot="append"
            type="primary"
            icon="el-icon-search"
            @click="getList"
          ></el-button>
        </el-input>
      </div>

      <div class="keBox">
        <div class="keList">
          <div
            class="keItem"
            v-for="item in keList"
            @click="toDetail(item.id)"
            :key="item.id"
          >
            <el-card :body-style="{ padding: '0px' }" shadow="hover">
              <el-image :src="define.APIURl + item.cover" class="image" />

              <div class="dec">
                {{ item.name }}
                <div class="bottom">
                  <span> {{ item.teacher || "暂无教师" }} </span>
                  <span> {{ item.learnUsers || 0 }}人学习 </span>
                </div>
              </div>
            </el-card>
          </div>
          <el-empty
            style="margin: 0 auto"
            v-if="keList.length == 0"
            description="暂无数据"
          ></el-empty>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          style="margin: 0 auto"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="listPagination.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import define from "@/utils/define";
import meunBtn from "../personal/pages/compents/meunBtn";
import { TemsCourseCatalog, TemsCourseList } from "../../api/study";

export default {
  name: "sduty",
  components: {
    meunBtn,
  },
  data() {
    return {
      meunBtnList: [],
      keList: [{}, {}, {}, {}, {}, {}],
      geshiList: [
        { name: "全部", id: "全部" },
        { name: "视频", id: "视频" },
        { name: "音频", id: "音频" },
        { name: "文档", id: "文档" },
        { name: "图片", id: "图片" },
      ],
      getMeunList: [],
      search: {
        currentPage: 1,
        pageSize: 20,
        sidx: "",
        sort: "desc",
        category: "",
      },
      listPagination: {},
      act: {},
      act2: {},
    };
  },
  computed: {
    sysConfig() {},
    positionD() {
      return (
        (this.act.name || "") + (this.act2.name ? " > " + this.act2.name : "")
      );
    },
  },
  created() {
    console.log();

    var categoryF = this.$route.query.categoryF;
    if (this.$route.query.category) {
      this.search.category = this.$route.query.category;
    }

    TemsCourseCatalog({}).then((res) => {
      this.meunBtnList = [];

      this.meunBtnList = [{ name: "全部", id: "全部" }, ...res.data.list];
      if (categoryF != "undefined") {
        var ele = this.meunBtnList.find((el) => {
          return el.id == categoryF;
        });
        // console.log()
        this.change(ele);
      }
    });
    this.getList();
  },
  methods: {
    handleCurrentChange(v) {
      this.search.currentPage = v;
      this.getList();
    },
    toDetail(id) {
      if (!id) {
        return;
      }
      this.$router.push(`/course/detail?id=${id}`);
    },
    getList() {
      TemsCourseList(this.search).then((res) => {
        this.keList = res.data.list;
        this.listPagination = { ...res.data.pagination };
      });
    },
    change(item) {
      this.getMeunList = item.children || [];
      this.act = { ...item };
      this.act2 = {};
      this.search.category = item.name != "全部" ? item.id : "";
      this.getList();
    },
    change2(item) {
      // this.getMeunList = item.children

      this.act2 = { ...item };
      this.search.category = item.name != "全部" ? item.id : "";
      this.getList();
    },
    change3(item) {
      this.search.chapterType = item.name != "全部" ? item.id : "";
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  background: rgb(21, 107, 246);
  height: 400px;
  width: 100%;
}

.top {
  background: #fff;
  padding: 20px;
  margin-top: 10px;
}

.search {
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    font-size: 15px;
    color: #999;
  }
}

.content {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  padding-bottom: 100px;
}

.imgList {
  position: absolute;
  left: 238px;
  top: 0;
  width: 869px;
  height: 389px;

  img {
    width: 100%;
  }
}

.keTitle {
  height: 60px;
  line-height: 60px;
}

.keList {
  width: 100%;
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;

  .keItem {
    transition: 0.2s all;
    margin-top: 20px;
    border-radius: 15px;
    //  float: left;
    width: 285px;
    height: 309px;

    // margin-right: 20px;
    img {
      width: 285px;
      height: 161px;
    }
  }

  .keItem:not(:nth-child(4n + 1)) {
    margin-left: 20px;
  }

  // .keItem:last-child {
  //     margin-left: 20px;
  // }
}

.keItem:hover {
  cursor: pointer;
}

// .keList::after {
//     content: '';
//     flex: 1;

// }

.dec {
  transition: 0.5s all;
  height: 285px;
  height: 148px;
  padding: 20px 16px;
  font-size: 18px;
  font-weight: bold;
  position: relative;

  .bottom {
    width: 90%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 20px;
    color: #999;
    font-size: 14px;
  }
}

.dec:hover {
  color: rgb(21, 107, 246);
}

.image {
  width: 100%;
  display: block;
  height: 161px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.pagination {
  height: 40px;
  width: auto;
  margin-top: 50px;
  // display: flex;
  // justify-content: space-between;
}
</style>
